<template>
  <div class="sign-up-info">
    <div class="search-content">
      <!-- <span style="font-size: 14px;margin-left: 10px;">业务类型：</span>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(city,i) in cities" :label="city.value" :key="i" >{{city.label}}</el-checkbox>
            </el-checkbox-group> -->
      <el-input
        class="search-content-input"
        v-model="searchContent.pay_ordersn"
        placeholder="请输入订单编号"
        prop="searchContent.effective_day"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.pay_result_id"
        placeholder="第三方支付订单编号"
        prop="searchContent.effective_day"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.store_id"
        placeholder="店铺id"
        prop="searchContent.effective_day"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.store_name"
        placeholder="经销商名称"
        prop="searchContent.effective_day"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.store_owner"
        placeholder="公司名称"
        prop="searchContent.effective_day"
      ></el-input>
      <span style="font-size: 14px;margin-left: 10px;" class="time-range-label"
        >交易金额：</span
      >
      <el-input
        class="search-content-input"
        v-model="searchContent.pay_money_start"
        placeholder="付款金额（起始值）"
        prop="searchContent.effective_day"
      ></el-input
      >~
      <el-input
        class="search-content-input"
        v-model="searchContent.pay_money_end"
        placeholder="付款金额（结束值）"
        prop="searchContent.effective_day"
      ></el-input>
      <div class="time-range-wrapper">
        <span class="time-range-label">下单时间：</span>
        <el-date-picker
          v-model="searchContent.addTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="time-range-wrapper">
        <span class="time-range-label">支付时间：</span>
        <el-date-picker
          v-model="searchContent.payTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <!-- <span style="font-size: 14px;margin-left: 10px;" class="time-range-label">交易金额：</span>
            <el-input class="search-content-input" v-model="searchContent.userName" ></el-input>~
            <el-input class="search-content-input" v-model="searchContent.userPhone" ></el-input> -->
      <!-- <el-input class="search-content-input" v-model="searchContent.store_name" placeholder="请输入店铺名称"></el-input> -->
      <!-- <el-input class="search-content-input" v-model="searchContent.signUpChannel" placeholder="请输入报名渠道"></el-input> -->
      <!-- <el-input style="width: 0;visibility: hidden;" class="search-content-input" v-model="searchContent.employeeName" placeholder="请输入员工姓名"></el-input> -->
      <!-- <el-select v-model="searchContent.signUpChannel" placeholder="请选择对账状态">
                <el-option
                        v-for="item in channelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="searchContent.payStatus" placeholder="请选择支付类型">
                <el-option
                        v-for="item in payStatusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="searchContent.cdkey_state" placeholder="请选择交易状态">
                <el-option
                        v-for="item in statelist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select> -->
      <!-- <span style="font-size: 14px;margin-left: 10px;"class="time-range-label">订单搜索：</span> -->
      <!-- <el-select v-model="searchContent.oder_state" placeholder="请选择订单类型">
                <el-option
                        v-for="item in oderlist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select> -->
      <el-select
        v-model="searchContent.withdraw_status"
        placeholder="请选择提现状态"
      >
        <el-option
          v-for="item in drawstatelist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <div class="search-list">
      <el-table :data="signUpInfoList" border :height="oHeight">
        <el-table-column
          align="center"
          prop="wechat_order_id"
          label="ID"
          min-width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="store_name"
          label="经销商名称"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="store_owner"
          label="公司名称"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pay_ordersn"
          label="商户订单号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="pay_money"
          label="付款金额"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="fee_amount"
          label="手续费"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pay_result_id"
          label="第三方支付单号"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="store_id"
          label="店铺id"
          min-width="90"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="add_time"
          label="下单时间"
          min-width="90"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="支付时间"
          prop="pay_time"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="withdraw_id"
          label="提现订单id"
          min-width="90"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pay_status_desc"
          label="订单状态"
          min-width="90"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="withdraw_status_desc"
          label="提现状态"
          min-width="90"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="180">
          <!-- <template  slot-scope="scope">
                       <el-button  type="primary"  @click="reconciliation('tuikuan',scope.row.wechat_order_id)">申请退款</el-button>
                       <el-button  type="primary"  @click="reconciliation('chaxun',scope.row.wechat_order_id)">退款查询</el-button>
                    </template>           -->
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div
          style="    display: flex;
                justify-content: space-between;
                align-items: center;"
        >
          <el-upload
            style="width: 150px;"
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :limit="1"
            :on-change="
              (val, list) => {
                codeChange(val, list);
              }
            "
          >
            <!-- <el-button type="primary">同步银行流水</el-button> -->
          </el-upload>

          <!-- <el-button type="primary" style="margin-left: 20px;" @click="newoder">生成打款单</el-button> -->
          <!-- <div class="btn-group" >
                    <el-button type="primary" @click="synchronization">同步银行流水</el-button>
                </div>
                <div class="btn-group" >
					<el-button type="primary" style="margin-left: 10%;" @click="newoder">生成打款单</el-button>
                  <a class="btn-bottom" >新增项目券</a> 
                </div> -->
        </div>

        <div class="paginationOne">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchContent.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchContent.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormatter, objScreen } from "../../../../common/js/util";
import { resize } from "@/common/js/height.js";
// import Qs from 'qs';
import XLSX from "xlsx";
import Tinymce from "@/components/Tinymce";
export default {
  data() {
    return {
      form: {
        csv: "",
      },
      uploadData: {
        img_source: "attach_pointprod",
      },
      drawstatelist: [],
      checkAll: false,
      cities: [], //数据源
      checkedCities: [], //绑定默认选中
      isIndeterminate: false, //设置 indeterminate 状态，只负责样式控制
      payStatusList: [],
      statelist: [{ label: "成功 ", value: 1 }, { label: "退款", value: 2 }],
      oderlist: [
        { label: "第三方订单号 ", value: "pay_ordersn" },
        { label: "支付订单号", value: "ordersn" },
      ],
      addArr: [],
      list: [],
      channelList: [
        { label: "未对账", value: 0 },
        { label: "对账通过 ", value: 1 },
        { label: "金额不匹配", value: 2 },
        { label: "订单不存在", value: 3 },
        { label: "状态不匹配", value: 4 },
        { label: "对账通过,已退款", value: 5 },
      ],

      oHeight: 800,
      searchContent: {
        pay_ordersn: "",
        pay_result_id: "",
        store_id: "",
        store_name: "",
        store_owner: "",
        addTime: "",
        payTime: "",
        pay_money_start: "",
        pay_money_end: "",
        pay_channel: 1,
        withdraw_status: "",
      },
      signUpInfoList: [],
      total: 0,
    };
  },
  components: { Tinymce, XLSX },
  computed: {
    // exportLink() {
    // 	const data = {};
    // 	data.form_submit = "1";
    // 	data.curpage = this.searchContent.currentPage;
    // 	data.pagesize = this.searchContent.pageSize;
    // 	data.bg_name = this.searchContent.groupName;
    // 	data.pay_amount_end  = this.searchContent.userName;
    //     data.pay_amount_start = this.searchContent.userPhone;
    //     data.store_name = this.searchContent.store_name;
    //     data.ordersn = this.searchContent.effective_day;
    //     data.pay_channel = 1;
    //     data.ordersn_type  = this.searchContent.oder_state;
    //     data.pay_order_state  = this.searchContent.cdkey_state;
    // 	data.pay_type  = this.searchContent.payStatus;
    //     data.state = this.searchContent.signUpChannel;
    //     data.withdraw_status = this.searchContent.withdraw_status;
    //     data.employee_name = this.searchContent.employeeName;
    //     if (this.searchContent.addTime) {
    // 		const startAddMS = this.searchContent.addTime[0].getTime();
    // 		const endAddMS = this.searchContent.addTime[1].getTime();
    // 		if (startAddMS == endAddMS) {
    // 			data.verify_start_time  = dateFormatter('YYYY-MM-DD ', startAddMS);
    // 			data.verify_end_time  = dateFormatter('YYYY-MM-DD ', endAddMS + (24 * 60 * 60 - 1) * 1000);
    //         } else {
    // 			data.verify_start_time = dateFormatter('YYYY-MM-DD ', this.searchContent.addTime[0]);
    // 			data.verify_end_time  = dateFormatter('YYYY-MM-DD ', this.searchContent.addTime[1]);
    //         }
    // 	}
    // 	let domain = document.domain;
    // 	if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
    // 		domain = 'admin.chejj.cn'
    //     }
    // 	return location.protocol + '//' + domain.replace('admin', 'api') + '/admin/platform_coupon/index.php?act=platform_coupon&op=get_ucoupon&' + Qs.stringify(data);
    // }
  },
  methods: {
    codeChange(val, list) {
      console.log(">>>", val.raw);
      this.form.csv = val.raw;

      let fd = new FormData();
      fd.append("csv", this.form.csv);

      console.log("fd", fd);
      this.$http
        .post(
          "/admin/adminImports/index.php?act=reconciliationImport&op=run",
          fd
        )
        .then((res) => {
          if (res.code == 1) {
            this.$http
              .post(
                "/admin/bill/index.php?act=reconciliation&op=reconciliation"
              )
              .then((res) => {
                if (res.code == 1) {
                  alert(res.data.msg);
                } else {
                  alert(res.msg);
                }
              });
          } else {
            alert(res.msg);
          }
        });
    },

    synchronization() {},
    newoder() {
      this.getPackageListData();
    },
    // 全选 --- 当绑定值变化时触发的事件
    handleCheckAllChange(val) {
      console.log(val); //val的值是一个布尔值，点中全选为false，取消全选为true
      this.cities.forEach((item) => {
        //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
        this.checkedCities.push(item.value);
      });
      this.checkedCities = val ? this.checkedCities : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
      this.isIndeterminate = false; //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
      console.log(this.checkedCities);
    },
    // checkbox选中 --- 当绑定值变化时触发的事件
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length; //选中值的长度
      this.checkAll = checkedCount === this.cities.length; //如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length; //同全选按钮事件里面的那个样式控制
      console.log(this.checkedCities);
    },

    refund(item) {
      // this.$http.post('/admin/afterSalesGroupBuy/index.php?act=signup&op=returnMoney', {
      // 	id: item.id
      // }).then(res => {
      // 	if (res.code == 1) {
      //         item.payStatus = 3;
      //     } else {
      // 		alert(res.msg);
      //     }
      // })
    },

    computedCheckStatus(code) {
      switch (code * 1) {
        case 1:
          return "未使用";
        case 3:
          return "已过期";
        case 2:
          return "已使用";
        case 4:
          return "已失效";
        case 5:
          return "未激活";
        case 9:
          return "9";
        case 11:
          return "11";
        case 12:
          return "22";
        case 999:
          return "999";
      }
    },
    //操作
    reconciliation(type, id) {
      if (type == "tuikuan") {
        this.$http
          .post("/admin/bill/index.php?act=storeRefund&op=refund", {
            wechat_order_id: id,
          })
          .then((res) => {
            if (res.code == 1) {
              alert(res.msg);
            } else {
              alert(res.msg);
            }
          });
      } else if (type == "chaxun") {
        this.$http
          .post("/admin/bill/index.php?act=storeRefund&op=refundSelect", {
            wechat_order_id: id,
          })
          .then((res) => {
            if (res.code == 1) {
              alert(res.msg);
            } else {
              alert(res.msg);
            }
          });
      }
    },
    resetSearchData() {
      this.searchContent.pay_ordersn = "";
      this.searchContent.pay_result_id = "";
      this.searchContent.store_id = "";
      this.searchContent.store_name = "";
      this.searchContent.store_owner = "";
      this.searchContent.addTime = "";
      this.searchContent.payTime = "";
      this.searchContent.pay_money_start = "";
      this.searchContent.pay_money_end = "";
      this.searchContent.withdraw_status = "";
      this.searchContent = [];
      this.checkedCities = [];
      this.isIndeterminate = false;
      this.getListData();
    },
    //获取支付类型
    getPaystate() {
      this.$http
        .post("/admin/bill/index.php?act=reconciliation&op=getOrdersTypes")
        .then((res) => {
          if (res.code == 1) {
            this.payStatusList = res.data;
          } else {
            alert(res.msg);
          }
        });
    },
    //获取提现状态
    getpaychannels() {
      this.$http
        .post("/admin/bill/index.php?act=reconciliation&op=getWithdrawStatus")
        .then((res) => {
          if (res.code == 1) {
            this.drawstatelist = res.data;
          } else {
            alert(res.msg);
          }
        });
    },
    search() {
      this.searchContent.currentPage = 1;
      this.getListData();
    },
    handleSizeChange(pageSize) {
      this.searchContent.pageSize = pageSize;
      this.searchContent.currentPage = 1;
      this.getListData();
    },
    handleCurrentChange(page) {
      this.searchContent.currentPage = page;
      this.getListData();
    },
    //             getPackageListData() {
    //                 var temp=[];
    //                 for(var i=0;i<this.checkedCities.length;i++){
    //                     if(this.checkedCities.indexOf(this.checkedCities[i]) == i){
    //                     temp.push(this.checkedCities[i]);
    //                     }
    //                 }
    //                 var key=[];
    //                 if(temp.length<13){
    //                     for(var j=0;j<13;j++){
    //                         for(var i=0;i<temp.length;i++){
    //                             if(temp[i]==this.cities[j].label){
    //                                 key.push(this.cities[j].value);

    //                             }
    //                         }
    //                     }
    //                 }
    //                 console.log(key);
    //                 const data = {};
    //                 data.business_type = key;
    //                 data.page = this.searchContent.currentPage;
    //                 data.pagesize = this.searchContent.pageSize;
    //                 data.pay_amount_start   = this.searchContent.userName;
    //                 data.pay_amount_end = this.searchContent.userPhone;
    //                 data.ordersn = this.searchContent.effective_day;
    //                 data.ordersn_type  = this.searchContent.oder_state;
    //                 data.pay_order_state  = this.searchContent.cdkey_state;
    //                 data.pay_type  = this.searchContent.payStatus;
    //                 data.state = this.searchContent.signUpChannel;
    //                 data.pay_channel = 1;
    //                 data.withdraw_status = this.searchContent.withdraw_status;
    //                 if (this.searchContent.addTime) {
    //                     const startAddMS = this.searchContent.addTime[0].getTime();
    //                     const endAddMS = this.searchContent.addTime[1].getTime();
    //                     if (startAddMS == endAddMS) {
    //                         data.pay_time_start  = dateFormatter('YYYY-MM-DD ', startAddMS);
    //                         data.pay_time_end  = dateFormatter('YYYY-MM-DD ', endAddMS + (24 * 60 * 60 - 1) * 1000);
    //                     } else {
    //                         data.pay_time_start = dateFormatter('YYYY-MM-DD ', this.searchContent.addTime[0]);
    //                         data.pay_time_end  = dateFormatter('YYYY-MM-DD ', this.searchContent.addTime[1]);
    //                     }
    //                 }
    //                 console.log("data",data);
    //                 this.$http.post('/admin/bill/index.php?act=reconciliation&op=setPackage', data).then(res => {
    //                     this.$router.push(`/home/operate-panel/pay-check/group-management`) ;
    //                 })
    // },
    getListData() {
      // var temp=[];
      // for(var i=0;i<this.checkedCities.length;i++){
      //     if(this.checkedCities.indexOf(this.checkedCities[i]) == i){
      //         temp.push(this.checkedCities[i]);
      //     }
      // }
      // var key=[];
      // if(temp.length<13){
      //     for(var j=0;j<13;j++){
      //         for(var i=0;i<temp.length;i++){
      //         if(temp[i]==this.cities[j].label){
      //             key.push(this.cities[j].value);

      //             }
      //         }
      //     }
      // }
      const data = {};
      data.pay_ordersn = this.searchContent.pay_ordersn;
      data.page = this.searchContent.currentPage;
      data.pageSize = this.searchContent.pageSize;
      data.pay_result_id = this.searchContent.pay_result_id;
      data.store_id = this.searchContent.store_id;
      data.store_name = this.searchContent.store_name;
      data.store_owner = this.searchContent.store_owner;
      data.pay_channel = 1;
      data.withdraw_status = this.searchContent.withdraw_status;
      // if(data.ordersn &&data.ordersn_type==undefined){
      //     this.$message({
      //         showClose: true,
      //         message: '请选择订单类型',
      //         type: 'error'
      //     });
      //     return;
      // }
      data.pay_money_start = this.searchContent.pay_money_start;
      data.pay_money_end = this.searchContent.pay_money_end;
      if (this.searchContent.payTime) {
        const startAddMS = this.searchContent.payTime[0].getTime();
        const endAddMS = this.searchContent.payTime[1].getTime();
        if (startAddMS == endAddMS) {
          data.pay_time_start = dateFormatter("YYYY-MM-DD ", startAddMS);
          data.pay_time_end = dateFormatter(
            "YYYY-MM-DD ",
            endAddMS + (24 * 60 * 60 - 1) * 1000
          );
        } else {
          data.pay_time_start = dateFormatter(
            "YYYY-MM-DD ",
            this.searchContent.payTime[0]
          );
          data.pay_time_end = dateFormatter(
            "YYYY-MM-DD ",
            this.searchContent.payTime[1]
          );
        }
      }
      if (this.searchContent.addTime) {
        const startAddMS = this.searchContent.addTime[0].getTime();
        const endAddMS = this.searchContent.addTime[1].getTime();
        if (startAddMS == endAddMS) {
          data.add_time_start = dateFormatter("YYYY-MM-DD ", startAddMS);
          data.add_time_end = dateFormatter(
            "YYYY-MM-DD ",
            endAddMS + (24 * 60 * 60 - 1) * 1000
          );
        } else {
          data.add_time_start = dateFormatter(
            "YYYY-MM-DD ",
            this.searchContent.addTime[0]
          );
          data.add_time_end = dateFormatter(
            "YYYY-MM-DD ",
            this.searchContent.addTime[1]
          );
        }
      }
      console.log("data", data);
      this.$http
        .post(
          "/admin/bill/index.php?act=reconciliation&op=autoProfitSharing",
          data
        )
        .then((res) => {
          if (res.code == 1) {
            if (res.data && res.data.list.length) {
              this.signUpInfoList = res.data.list;
              // this.signUpInfoList = res.data.list.map(function(item) {
              //     return {
              //         ordersn: item.ordersn,
              //         amount: item.amount,
              //         pay_ordersn: item.pay_ordersn,
              //         pay_time: item.pay_time,
              //         poundage: item.poundage,
              //         poundage_rate: item.poundage_rate,
              //         withdraw_status_desc:item.withdraw_status_desc,
              //         package_id: item.package_id,
              //         store_name: item.store_name,
              //         pay_type_name: item.pay_type_name,
              //         state_name: item.state_name,
              //         pay_order_state_name:item.pay_order_state_name,
              //         business_type_name: item.business_type_name,
              //         third_amount: item.third_amount*1000,
              //         // uc_verify: item.uc_verify,
              //         // qq_work: item.qq_work,
              //         // internal_settlement: item.internal_settlement,
              //         // uc_member_id: item.uc_member_id,

              //     }
              // });
              this.total = parseInt(res.data.totalCount);
            } else {
              this.signUpInfoList = [];
              this.total = 0;
            }
          } else if (res.code == 2001) {
            this.signUpInfoList = [];
            this.total = 0;
          } else {
            alert(res.msg);
          }
        });
    },
    // 读取excel
    getBusinessTypes() {
      this.$http
        .post("/admin/bill/index.php?act=reconciliation&op=getBusinessTypes")
        .then((res) => {
          if (res.code == 1) {
            this.cities = res.data;
            console.log(this.list);
          } else {
            alert(res.msg);
          }
        });
    },
  },

  mounted() {
    resize(this);
  },
  created() {
    if (
      this.$parent.tabLists[1] &&
      this.$parent.tabLists[1].name == "打款过账"
    ) {
      this.$parent.tabLists.splice(1, 1);
    }
    this.getListData();
    this.getBusinessTypes();
    this.getPaystate();
    this.getpaychannels();
  },
  name: "sign-up-info",
};
</script>

<style lang="scss" scoped>
.sign-up-info {
  .search-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &-input {
      width: 200px;
    }
    .time-range-wrapper {
      .time-range-label {
        font-size: 14px;
      }
      display: flex;
      align-items: center;
      /deep/.el-range-separator {
        box-sizing: content-box;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.btn-bottom {
  background: #409eff;
  color: #fff;
  border: 0;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 3px;
  display: inline-block;
}
</style>
